<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shadows</title>
    <meta name="description" content="Shadows - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #111" shadow="type: basic" stats>
      <a-assets>
        <a-mixin id="wall"
                 geometry="primitive: box; height: 30; width: 30; depth: 2"
                 material="color: #333; metalness: 0; roughness: 1"
                 shadow="cast: false; receive: true"></a-mixin>
      </a-assets>

      <a-entity position="0 8.4 -8">
        <a-entity light="color: #AAA; type: ambient"></a-entity>

        <!-- Center point light. -->
        <a-entity geometry="primitive: sphere; radius: 0.15"
                  material="color: #FAFAFA; shader: flat"
                  light="castShadow: true; color: #FAFAFA; intensity: 0.5; shadowBias: 0.01
                         shadowCameraNear: 1; type: point; shadowMapWidth: 1024; shadowMapHeight: 1024"
                  position="0 -1 1"
                  animation="property: scale; to: 2 2 2; dur: 3000; dir: alternate; loop: true"
                  animation="property: intensity; to: 1; dur: 3000; dir: alternate; loop: true"></a-entity>

        <!-- Animating point light. -->
        <a-entity animation="property: rotation; to: 0 360 360; dur: 5000; easing: linear; loop: true">
          <a-entity geometry="primitive: sphere; radius: 0.25"
                    material="color: #EF2D5E; shader: flat"
                    light="castShadow: true; color: #EF2D5E; intensity: 1; shadowBias: 0.01
                           shadowCameraNear: 1; type: point; shadowMapWidth: 1024; shadowMapHeight: 1024"
                    position="0 5 5"></a-entity>
        </a-entity>

        <!-- Torus. -->
        <a-entity geometry="primitive: torusKnot; radius: 4; radiusTubular: 0.1;
                            segmentsRadial: 150; segmentsTubular: 20; p: 17; q: 4;"
                  material="color: #EF2D5E; metalness: 0.75"
                  shadow="cast: true; receive: true"
                  position="0 -1 2"
                  animation="property: rotation; dur: 36000; to: 0 360 0; loop: true; easing: linear">
        </a-entity>

        <!-- Walls. -->
        <a-entity mixin="wall" position="0 0 -10"></a-entity>
        <a-entity mixin="wall" position="-10 0 0" rotation="0 90 0"></a-entity>
        <a-entity mixin="wall" position="10 0 0" rotation="0 90 0"></a-entity>
        <a-entity mixin="wall" position="0 10 0" rotation="90 0 0"></a-entity>
        <a-entity mixin="wall" position="0 -10 0" rotation="90 0 0"></a-entity>
      </a-entity>

      <!-- Meshes -->
      <a-entity geometry="primitive: box" material="color: #EF2D5E; metalness: 0" shadow position="0 0 -4"></a-entity>
      <a-entity geometry="primitive: sphere" material="color: #EF2D5E; metalness: 0" shadow position="-2 0 -4"></a-entity>
      <a-entity geometry="primitive: cylinder" material="color: #EF2D5E; metalness: 0" shadow position="2 0 -4"></a-entity>
    </a-scene>
  </body>
</html>
